@use '@angular/material' as mat;
@import 'config';
@import '../node_modules/@angular/material/theming';

// Define a custom typography config that overrides the font-family
$custom-typography: mat.define-typography-config(
  $font-family:   $body-font-family,
  $display-4:     mat.define-typography-level(3.75rem, 1.0925, 700, $body-font-family),
  $display-3:     mat.define-typography-level(2.4917rem, 1.1037, 700, $body-font-family),
  $display-2:     mat.define-typography-level(2.2148rem, 1.1287, 700, $body-font-family),
  $display-1:     mat.define-typography-level(1.9688rem, 1.1429, 700, $body-font-family),
  $headline:      mat.define-typography-level(1.7500rem, 1.1429, 700, $body-font-family),     // h1
  $title:         mat.define-typography-level(1.5625rem, 1.1200, 500, $body-font-family),     // h2
  $subheading-2:  mat.define-typography-level(1.3750rem, 1.0000, 700, $heading-font-family),  // h3
  $subheading-1:  mat.define-typography-level(1.2500rem, 1.1000, 700, $body-font-family),     // h4
  $body-2:        mat.define-typography-level(1.1250rem, 1.1111, 500, $body-font-family),     // h5
  $body-1:        mat.define-typography-level(1.0000rem, 1.1250, 500, $body-font-family),     // p
  $caption:       mat.define-typography-level(0.8750rem, 0.7143, 500, $body-font-family),     // small
  $button:        mat.define-typography-level(1.0000rem, 1.1250, 500, $body-font-family),
  $input:         mat.define-typography-level(1.0000rem, 1.1250, 500, $body-font-family)
);

mat.$blue-palette: (
  50:  #f1f5f7,
  100: #b3c1d3,
  200: $brand-primary-tint-3,
  300: $brand-primary-tint-2,
  400: $brand-primary-tint-1,
  500: $brand-primary,
  600: $brand-primary-shade-1,
  700: $brand-primary-shade-2,
  800: $brand-primary-shade-3,
  900: $brand-primary-shade-4,
  A100: #b3c1d3,
  A200: $brand-primary-tint-3,
  A400: $brand-primary-tint-2,
  A700: $brand-primary-tint-1,
  contrast: (
    50: $body-color,
    100: $body-color,
    200: $body-color,
    300: #ffffff,
    400: #ffffff,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: $body-color,
    A200: #ffffff,
    A400: #ffffff,
    A700: #ffffff,
  )
);

mat.$orange-palette: (
  50:  #fceee0,
  100: $brand-accent-tint-3,
  200: $brand-accent-tint-2,
  300: $brand-accent-tint-1,
  400: $brand-accent,
  500: $brand-accent-shade-1,
  600: $brand-accent-shade-2,
  700: $brand-accent-shade-3,
  800: $brand-accent-shade-4,
  900: $brand-accent-shade-5,
  A100: #fceee0,
  A200: $brand-accent-tint-3,
  A400: $brand-accent-tint-2,
  A700: $brand-accent-tint-1,
  contrast: (
    50: $body-color,
    100: $body-color,
    200: $body-color,
    300: $body-color,
    400: $body-color,
    500: #ffffff,
    600: #ffffff,
    700: #ffffff,
    800: #ffffff,
    900: #ffffff,
    A100: $body-color,
    A200: $body-color,
    A400: $body-color,
    A700: $body-color,
  )
);

$cr-connect-primary: mat.define-palette(mat.$blue-palette);
$cr-connect-accent:  mat.define-palette(mat.$orange-palette);
$cr-connect-warn:    mat.define-palette(mat.$red-palette);
$cr-connect-theme:   mat.define-light-theme($cr-connect-primary, $cr-connect-accent, $cr-connect-warn);

